<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>玖月奇迹管理后台{{title}}</title>
    <!-- Tell the browser to be responsive to screen width -->
    <link href="{{ static('img/photo2.png') }}" rel="shortcut icon">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="{{ static ('bootstrap/css/bootstrap.min.css') }}">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="{{ static ('fonts/font-awesome.min.css') }}">
    <!-- Ionicons -->
    <link rel="stylesheet" href="{{  static ('ionicons/ionicons.min.css') }}">
    <!-- Theme style -->
    <link rel="stylesheet" href="{{  static ('css/AdminLTE.min.css') }}">
    <!-- iCheck -->
    <link rel="stylesheet" href="{{  static ('plugins/iCheck/square/blue.css') }}">
    <link href="{{ static('css/bootstrapValidator.min.css') }}" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body class="hold-transition login-page">
{% if err_msg %}
<div class="alert alert-error alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    {{ err_msg }}
</div>
{% endif %}
<div class="login-box">
    <div class="login-logo">
        <a href="#"><b>玖月奇迹</b>管理后台</a>
    </div><!-- /.login-logo -->
    <div class="login-box-body">
        <form method="post">
            <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
            <div class="form-group has-feedback">
                <input class="form-control" id="user" name="username" type="text"/>
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" id="pass" name="password" class="form-control">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="row">
                <div class="col-xs-8">
                    <div class="checkbox icheck">
                        <label>
                            &nbsp;&nbsp;<input id="rmbUser" type="checkbox"> 记住我
                        </label>
                    </div>
                </div><!-- /.col -->
                <div class="col-xs-4">
                    <button type="submit" class="btn btn-primary btn-block btn-flat" onclick="saveUserInfo();">登陆
                    </button>
                </div><!-- /.col -->
            </div>
        </form>


    </div><!-- /.login-box-body -->
</div><!-- /.login-box -->

<!-- jQuery 2.1.4 -->
<script src="{{  static ('plugins/jQuery/jQuery-2.1.4.min.js') }}"></script>
<!-- Bootstrap 3.3.5 -->
<script src="{{  static ('bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{  static ('js/jquery.cookie.js') }}"></script>
<!-- iCheck -->
<script src="{{  static ('plugins/iCheck/icheck.min.js') }}"></script>
<script type="text/javascript" src="{{ static('js/bootstrapValidator.min.js') }}"></script>
<script>

    $('form').bootstrapValidator({
//        live: 'disabled',
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            username: {
                message: 'The username is not valid',
                validators: {
                    notEmpty: {
                        message: '用户名不能为空'
                    },

                },
            },
            password: {
                validators: {
                    notEmpty: {
                        message: '密码不能为空'
                    },

                }
            },
        }

    });
    $(function () {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' // optional
        });
    });

    $(document).ready(function () {
        if ($.cookie("rmbUser") == "true") {
            if ($("#rmbUser").prop("checked", true));
            $('.icheckbox_square-blue').addClass('checked');
            $('.icheckbox_square-blue').attr("aria-checked", "true");
            $("#user").val($.cookie("userName"));
            $("#pass").val($.cookie("passWord"));
        }
    });
    //保存用户信息
    function saveUserInfo() {
        if ($("#rmbUser").prop("checked")) {
            var userName = $("#user").val();
            var passWord = $("#pass").val();
            $.cookie("rmbUser", "true", {expires: 7}); // 存储一个带7天期限的 cookie
            $.cookie("userName", userName, {expires: 7}); // 存储一个带7天期限的 cookie
            $.cookie("passWord", passWord, {expires: 7}); // 存储一个带7天期限的 cookie
        }
        else {
            $.cookie("rmbUser", "false", {expires: -1});
            $.cookie("userName", '', {expires: -1});
            $.cookie("passWord", '', {expires: -1});
        }
    }
</script>
</body>
</html>
